<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>Title</title>
    {css href="/static/jqweui/lib/weui/weui.css" /}
    {css href="/static/jqweui/css/jquery-weui.css" /}


    {js href="/static/jqweui/lib/jquery-2.1.4.js" /}
    {js href="/static/jqweui/js/jquery-weui.js" /}
    {js href="/static/vue/vue.js" /}
    {js href="/static/jqweui/lib/fastclick.js" /}


    <script>
        $(function() {
            FastClick.attach(document.body);
        });
    </script>
</head>
<body>
<style>
    .weui-uploader__file{

        overflow: hidden;
    }
    img{
        width:100%;
        /*max-width:100%;*/
        /*max-height: 100%;*/
    }
</style>


    <div id="hom"  class="weui-cells weui-cells_form">
        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">姓名：</label></div>
            <div class="weui-cell__bd">
                <input v-model="name" class="weui-input" type="text" name="name" placeholder="请输入姓名">
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <div class="weui-uploader">
                    <div class="weui-uploader__hd">
                        <p class="weui-uploader__title">图片上传</p>
                        <div class="weui-uploader__info">0/2</div>
                    </div>
                    <div class="weui-uploader__bd">
                        <ul  class="weui-uploader__files" id="uploaderFiles">
                            <li  class="weui-uploader__file" v-for="(img,key) in images" >
                                <img :src='img' @click='delImage(key)' />

                            </li>
                            <div class="weui-uploader__input-box">
                                <input id="uploaderInput"  @change="addpic"  class="weui-uploader__input" type="file" accept="image/*" multiple="">
                            </div>
                        </ul>

                    </div>
                </div>
            </div>
        </div>
        <button  v-on:click="sub" type="button" class="weui-btn bth-sub">&nbsp;提交</button>
    </div>








<script>


    var pics = new Vue({
        el: '#hom',
        data: {
            pics:[],
            files:[],
            images:[],
name:name

        },
        methods: {

            addpic:function (event) {
                var files=  event.target.files || event.dataTransfer.files;
                if(!files.length){
                    return
                }
                this.createImage(files);

            console.log('addpic',event)
            },
            createImage:function (file) {
                if(typeof FileReader==='undefined'){
                    alert('您的浏览器不支持图片上传，请升级您的浏览器');
                    return false;
                }
                var image = new Image();
                var vm = this;
                var pics=this.files;
                var leng=file.length;
                for(var i=0;i<leng;i++){
                    pics.push(file[i]);
                    var reader = new FileReader();
                    reader.readAsDataURL(file[i]);
                    reader.onload =function(e){
                        vm.images.push(e.target.result);
                    };
                }
            },
            sub: function () {
                $.ajax({
                    type: "post",
                    url: "{:url('index/vuedemo/save')}",
                    data: {
                        name:this.name,
                        images:this.images

                    },
                    dataType: "json",
                    success: function(data){
                       console.log('ses',data)
                    }
                });
            }
        }


    })



</script>



</body>
</html>